<template>
  <div class="data-detail-box">
    <div class="data-detail-left">
      <div class="data-detail-title">
        {{ data.title }}
      </div>
      <div class="data-detail-img">
          <img style="width:3.4rem;height:3.4rem" :src="require('@/assets/images/'+data.img)" alt="">
      </div>
    </div>
    <div class="data-detail-right">
      <span class="countRow fontcolor-blue" :style="{color:data.color,fontSize:'30px'}">{{ data.value }}</span>
      <span class="unit">{{ data.tip }}</span>
    </div>

  </div>
</template>

<script>
export default {
  name: 'detail',
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
@mixin flex {
  display: flex;
  justify-content:space-around;
  align-items: flex-end;
}
.data-detail-box {
  width: 32%;
  padding: 20px;
  @include flex;

  .data-detail-left {
    .data-detail-title {
      font-size: 16px;
    }
    .data-detail-img{
      margin-top:20px;
    }

  }
  .data-detail-right{
    span{
      display:block;
      text-align:center;
    }
  }


}
</style>
